<template>
  <div class="contaner-wrapper">
    <components :is="frame"></components>
    <el-button
      v-for="(e, i) in list"
      :key="i"
      @click="changeFrame(e.url)"
    >{{ e.label }}</el-button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      list: [
        { label: 'LongList', url: '@/views/LongList/LongList' },
        { label: 'ClimbStairs', url: '@/views/ClimbStairs/ClimbStairs' },
        { label: 'WeChat', url: '@/views/WeChat/WeChata' },
      ],
      frame: '',
    }
  },
  methods: {
    changeFrame(path) {
      // this.getComponent(path)
      //   .then((res) => {
      //     this.frame = res.default
      //   })
      //   .catch((err) => {
      //     this.$message.error(err)
      //   })
      this.getComponent2(path)
        .then((res) => {
          this.frame = res.default
        })
        .catch((ex) => {
          this.$message.error('路径获取错误')
        })
    },
    getComponent2(path) {
      return import('@/views' + path.replace('@/views', ''))
    },
    getComponent(path) {
      return new Promise((resolve, reject) => {
        try {
          const r = require(`@/views${path.replace('@/views', '')}`)
          resolve(r)
        } catch (error) {
          reject('组件获取错误')
        }
      })
    },
  },
}
</script>

<style lang="scss">
.contaner-wrapper {
  width: 100%;
  height: 100%;
  background: pink;
  position: relative;
}
</style>